import React, { Component } from 'react'
import { Layout, Button, message } from 'antd';
const { Content } = Layout;

let mediaRecorder
let recordBlobs
let audioPlayer
export default class P8_record_audio extends Component {
    constructor(props) {
        super(props);
        this.state = {
            status: 'start'
        };

    }
    componentDidMount() {
        audioPlayer = this.refs['audio']
    }
    startClickHandle = async (e) => {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
            window.stream = stream
            this.setState({ status: 'startRecord' })
        } catch (e) {
            console.log('navigator.MediaDevices.getUserMedia:', e)
        }
    }
    startRecordClickHandle = (e) => {
        recordBlobs = []
        let options = { mimeType: 'audio/webm;' }
        try {
            mediaRecorder = new MediaRecorder(window.stream, options)//将录音对象与音频流绑定
        } catch (e) {
            console.log('MediaRecorder:', e)
            return
        }
        mediaRecorder.onstop = (event) => {
            console.log('Recorder stoped:', event)
            console.log('Recorder blobs:', recordBlobs)
        }
        mediaRecorder.ondataavailable = this.handleDataAvailable
        mediaRecorder.start(10)
        this.setState(
            {
                status: 'stopRecord'
            }
        )
    }
    stopRecordClickHandle = (e) => {
        mediaRecorder.stop()
        this.setState(
            {
                status: 'play'
            }
        )
    }
    playClickHandle = (e) => {
        const blob = new Blob(recordBlobs, { type: 'audio/webm;' })
        audioPlayer.src = null
        audioPlayer.src = window.URL.createObjectURL(blob);
        audioPlayer.play()
        this.setState(
            {
                status: 'download'
            }
        )
    }
    downloadButtonClickHandle = (e) => {
        const blob = new Blob(recordBlobs, { type: 'audio/webm;' });
        const url = window.URL.createObjectURL(blob);

        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = 'test.webm';
        document.body.appendChild(a);
        a.click();
        setTimeout(() => {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);
        }, 100);
        this.setState({
            status: 'start',
        });

    }


    handleDataAvailable = (event) => {

        if (event.data && event.data.size > 0) {
            recordBlobs.push(event.data);
        }

    }
    render() {
        return (
            <div>
                <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 600,
                    }}>
                    <audio ref="audio" autoPlay controls></audio>
                    <div>
                        <Button
                            onClick={this.startClickHandle}
                            disabled={this.state.status != 'start'}>
                            打开麦克风</Button>
                        <Button
                            onClick={this.startRecordClickHandle}
                            disabled={this.state.status != 'startRecord'}>
                            开始录制</Button>
                        <Button
                            onClick={this.stopRecordClickHandle}
                            disabled={this.state.status != 'stopRecord'}>
                            停止录制
                        </Button>
                        <Button
                            onClick={this.playClickHandle}
                            disabled={this.state.status != 'play'}>
                            播放
                        </Button>
                        <Button
                            onClick={this.downloadButtonClickHandle}
                            disabled={this.state.status != 'download'}>
                            下载
                        </Button>
                    </div>
                </Content>
            </div>
        )
    }
}
